<template>
  <div class="main">
    <h1>数据可视化面板</h1>
    <div class="body0">
      <div id="echarts0" />
    </div>
    <div class="body1">
      <div id="echarts1" />
      <div id="echarts2" />
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import {getVisualData, getCmsPageList} from '../../api/activity/index'
export default {
  data() {
    return {
      Up: 0,
      Down: 0
    }
  },
  mounted() {
    getVisualData().then(res => {
      console.log('========', res)
      // 折线图
      let table1 = {
        title: {
          text: '用户活跃度',
          subtext: '活跃度'
        },
        toolbox: {
          show: true,
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar'] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: res.data.data1.week
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: res.data.data1.dataY,
            type: 'line',
            smooth: true,
            areaStyle: {}
          }
        ]
      }
      let myChart0 = echarts.init(document.getElementById('echarts0'))
      myChart0.setOption(table1)

      // 基于准备好的dom，初始化echarts实例
      let table2 = {
        title: {
          text: '上线数和下线数',
          subtext: 'number'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['上线数', '下线数']
        },
        toolbox: {
          show: true,
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar'] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        calculable: true,
        xAxis: [
          {
            type: 'category',
            // prettier-ignore
            data: res.data.data2.week
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '上线数',
            type: 'bar',
            data: res.data.data2.dataUp,
            markPoint: {
              data: [
                { type: 'max', name: 'Max' },
                { type: 'min', name: 'Min' }
              ]
            },
            markLine: {
              data: [{ type: 'average', name: 'Avg' }]
            }
          },
          {
            name: '下线数',
            type: 'bar',
            data: res.data.data2.dataDown,
            //   markPoint: {
            //     data: [
            //       { name: 'Max', value: 170, xAxis: 7, yAxis: 183 },
            //       { name: 'Min', value: 2.3, xAxis: 11, yAxis: 3 }
            //     ]
            //   },
            markLine: {
              data: [{ type: 'average', name: 'Avg' }]
            }
          }
        ]
      }
      let myChart1 = echarts.init(document.getElementById('echarts1'))
      // 绘制图表
      myChart1.setOption(table2)
    })

    let params = {}
    params.pageNum = 1
    params.pageSize = 100
    params.creator = window.localStorage.getItem('username')

    getCmsPageList(params).then(res => {
      res.data.list.forEach(item => {
        if (item.is_abled) {
          this.Up++
        } else {
          this.Down++
        }
      })

      // 环形图
      let myChart2 = echarts.init(document.getElementById('echarts2'))
      myChart2.setOption({
        title: {
          text: '上下线总数统计'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        toolbox: {
          show: true,
          feature: {
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: this.Up, name: '上线' },
              { value: this.Down, name: '下线' }
            ]
          }
        ]
      })
    })
  }
}
</script>

<style lang="less" scoped>
.main{
    width: 100%;
    height: 98vh;
    overflow: auto;
    h1{
        text-align: center;
        font-weight: bolder;
        margin-top: 20px;
    }
    .body0{
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: start;
        align-items: flex-start;
        margin-top: 20px;
        padding-top: 10px;
        background-color: #fff;
    }
    .body1{
        height: 500px;
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: start;
        align-items: flex-start;
        margin-top: 20px;
        padding-top: 10px;
        background-color: #fff;
    }

}
#echarts0{
    height:500px;
    width: 100%;
}
#echarts1{
    height: 450px;
    width: 65%;
}
#echarts2{
    height:450px;
    width: 30%;
}

</style>
